<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>校园互助</title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/base.css">
    <link href="/index.css" rel="stylesheet">
    <link rel="stylesheet" href="/main.css">
    <link rel="stylesheet" href="/weather.css">
    <style>
        .form-container:first-child {
            margin-top: 0px;
        }
        
        .tt {
            margin-bottom: 260px;
            margin-right: 10px;
        }
    </style>

</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 网站标志 -->
        <div class="logo fl">
            <div class="logo fl">
                <i>校园互助</i>
            </div>
        </div>
        <!-- /网站标志 -->
        <!-- 用户信息 -->
        <div class="info">
            <div class="profile dropdown fr">
                <span class="btn dropdown-toggle" data-toggle="dropdown">
                    <div class="user_name">
                        <% if(session.user){%>
                            <span>欢迎你:<%= session.user %></span>
                <span class="caret"></span>
                <% } %>

            </div>

            </span>
            <div>
                <% if(!session.user){ %>
                    <a href="/signin">未登录,点击登录</a>
                    <span style="float: right; padding-right:40px ;"><a href="/signup">点击注册</a></span>
                    <% } %>
            </div>

            <ul class="dropdown-menu">
                <li><a href="/posts">主页</a></li>
                <li><span class="signout" style="display: block;padding-left:20px ;">退出</span></li>
            </ul>
        </div>
    </div>
    <!-- /用户信息 -->
    </div>
    <!-- /头部 -->

    <!-- 主体内容 -->
    <div class="content">
        <!-- 侧边栏 -->
        <div class="aside fl">
            <% if(session.user){ %>
                <ul class="menu list-unstyled">
                    <li>
                        <a class="item active" href="/posts">
                            <span class="glyphicon glyphicon-film"></span> 全部文章
                        </a>
                    </li>
                    <li>
                        <a class="item active" href="/create">
                            <span class="glyphicon glyphicon-user"></span> 发表文章
                        </a>
                    </li>
                    <li>
                        <a class="item active" href="/createup">
                            <span class="glyphicon glyphicon-hdd"></span> 发表悬赏贴
                        </a>
                    </li>
                    <li>
                        <a class="item active" href="/xsposts">
                            <span class="glyphicon glyphicon-hdd"></span>查看悬赏贴
                        </a>
                    </li>
                    <li>
                        <a class="item active" href="/personal">
                            <span class="glyphicon glyphicon-inbox"></span> 个人信息
                        </a>
                    </li>
                    <li>
                        <a class="item active" href="/showmyxs">
                            <span class="glyphicon glyphicon-inbox"></span> 查看个人接取的悬赏
                        </a>
                    </li>


                </ul>
                <% } %>
                    <% if(!session.user){ %>
                        <ul class="menu list-unstyled">
                            <li>
                                <a class="item active" href="/posts">
                                    <span class="glyphicon glyphicon-film"></span> 全部文章
                                </a>
                            </li>
                        </ul>
                        <% } %>
                            <div class="cprt">
                                Powered by <a href="#" target="_blank" style="color: #fff;">赵波，任滇杭，王首振</a>
                            </div>
        </div>
        <!-- 侧边栏 -->
        <div class="main">
            <!-- 分类标题 -->
            <div class="title">
                <h4>全部文章</h4>
            </div>
            <div class="back">
                <a title="回到顶部">
                    <img src="/img/less.png" width="70px" height="70px">
                </a>
            </div>
            <div class="show_weather">
                <p>
                    <span class="show_city"></span>
                    <span class="show_wendu"></span>
                    <span class="show_feng"></span>
                    <span class="show_zhiliang"></span>
                </p>
            </div>
            <!-- /分类标题 -->
            <div class="form-container">
                <div>
                    <p class="spost_user"><a href="/posts?author=<%= posts[0]['name'] %>">作者:<%= posts[0]['name']%></a></p>
                    <div class="post_title">
                        <h3>文章标题</h3>
                        <p>
                            <a href="/posts/<%= posts[0]['id'] %>">
                                <%= posts[0]['title']%>
                            </a>
                        </p>
                    </div>
                    <div class="post_content">
                        <h3>文章内容</h3>
                        <p>
                            <%= posts[0]['content']%>
                        </p>
                    </div>
                    <div class="edit">
                        <% if(session && session.user === posts[0]['name']){ %>
                            <p><a href="<%= posts[0]['id']%>/edit" class="submit tt">编辑</a></p>
                            <p><a class="delete_post submit tt">删除</a></p>
                            <% } %>

                    </div>
                </div>
                <div>
                    <h3>评论</h3>
                    <span>(共有<%= number %>条评论)</span>
                    <div class="comment_list">
                        <% comments.forEach(function(res){ %>
                            <div class="cmt_lists">
                                <p></p>
                                <p class="cmt_content">
                                    <%= res['content'] %>
                                        <span class="cmt_name">
                                                By: <%= res['name'] %>
                                                <% if(session && session.user === res['name']){ %>
                                                    <!--<a class="delete_comment" title="<%= res['id'] %>" onclick="deleteComment(this);">删除评论</a>-->
                                                    <a class="delete_comment" title="<%= res['id'] %>">删除评论</a>
                                                <% } %>
                                            </span>
                                </p>
                            </div>
                            <% }) %>

                    </div>
                    <% if(session.user){ %>
                        <form class="form" method="post" action="/<%=posts[0]['id'] %>">
                            <textarea class="textarea" name="content" id="content"></textarea>
                            <div class="submit">发表评论</div>
                        </form>
                        <% }else{ %>
                            <p class="tips">登录后才可以评论</p>
                            <% } %>
                </div>
            </div>
        </div>
    </div>
    <!-- /主体内容 -->
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/lib/ckeditor5/ckeditor.js"></script>
    <script type="text/javascript" src="/js/weather.js"></script>
    <script type="text/javascript" src="/js/animate.js"></script>
    <script type="text/javascript" src="/js/signout.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $('.delete_post').click(() => {
            $.ajax({
                url: '<%= posts[0]["id"]%>/remove',
                type: 'get',
                cache: false,
                success: function(msg) {
                    if (msg.data == 1) {
                        $('.success').text('删除文章成功');
                        fade('.success');
                        setTimeout(() => {
                            window.location.href = '/posts';
                        }, 1000);
                    } else if (msg.data == 2) {
                        $('.error').text('删除文章失败');
                        fade('.error');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }
                },
                error: function() {
                    alert('删除文章异常');
                }
            });
        });
    </script>
    <script type="text/javascript">
        $('.delete_comment').on('click', function() {
            var commentId = $(this).attr('title');
            console.log('commentId', commentId);
            $.ajax({
                url: '<%= posts[0]["id"] %>/comment/' + commentId + '/remove',
                type: 'get',
                cache: false,
                dataType: 'json',
                success: function(msg) {
                    if (msg.data == 1) {
                        $('.success').text('删除评论成功')
                        fade('.success')
                        setTimeout(() => {
                            window.location.reload()
                        }, 1000)
                    } else if (msg.data == 2) {
                        $('.error').text('删除评论失败')
                        fade('.error');
                        setTimeout(() => {
                            window.location.reload()
                        }, 1000)
                    }
                },
                error: function() {
                    alert('删除留言异常');
                }
            })
        })
    </script>
    <script type="text/javascript">
        $('.submit').click(() => {
            var content = $('#content').val();
            if (content != null && content != '') {
                $.ajax({
                    url: '/' + document.URL.slice(document.URL.lastIndexOf('/') + 1),
                    data: $('.form').serialize(),
                    type: 'post',
                    cache: false,
                    dataType: 'json',
                    success: function(msg) {
                        if (msg) {
                            $('.success').text('发表留言成功');
                            fade('.success');
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        }
                    },
                    error: function() {
                        alert('发表留言异常');
                    }
                });
            } else {
                alert('请输入评论内容');
                $('#content').focus();
            }
        });
    </script>
</body>

</html>